<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站活跃用户列表</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --border-light: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      padding: 20px;
      min-height: 100vh;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    
    .page-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .page-description {
      font-size: 14px;
      color: #6B7280;
      margin-top: 4px;
    }
    
    /* 列表样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--border-light);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 用户列表容器 */
    .user-list-container {
      display: none;
    }
    
    .user-list-container.active {
      display: block;
    }
    
    /* 通用用户项样式 */
    .user-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-light);
      transition: background-color 0.2s ease;
    }
    
    .user-item:last-child {
      border-bottom: none;
    }
    
    .user-item:hover {
      background-color: #F9FAFB;
    }
    
    .avatar {
      position: relative;
      margin-right: 12px;
    }
    
    .avatar-img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      background-color: #E5E7EB;
    }
    
    .status-indicator {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid white;
    }
    
    .status-online {
      background-color: var(--secondary);
    }
    
    .status-offline {
      background-color: #9CA3AF;
    }
    
    .status-away {
      background-color: #F59E0B;
    }
    
    .user-info {
      flex: 1;
      min-width: 0;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-meta {
      font-size: 13px;
      color: #6B7280;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-actions {
      display: flex;
      gap: 8px;
    }
    
    .action-btn {
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    /* 样式1: 基础列表样式 */
    .style-basic .action-btn.follow {
      background-color: var(--primary);
      color: white;
      border: none;
    }
    
    .style-basic .action-btn.following {
      background-color: #F3F4F6;
      color: var(--dark);
      border: none;
    }
    
    /* 样式2: 带互动数据的列表 */
    .style-interactive .user-meta {
      margin-bottom: 4px;
    }
    
    .user-stats {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: #6B7280;
    }
    
    .user-stats .stat {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .style-interactive .action-btn {
      background: none;
      border: 1px solid var(--primary);
      color: var(--primary);
      padding: 5px 12px;
    }
    
    .style-interactive .action-btn.following {
      background-color: var(--primary);
      color: white;
    }
    
    /* 样式3: 网格卡片样式 */
    .style-grid .user-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background-color: var(--border-light);
    }
    
    .style-grid .user-item {
      flex-direction: column;
      text-align: center;
      padding: 16px;
      border-bottom: none;
    }
    
    .style-grid .avatar {
      margin-right: 0;
      margin-bottom: 8px;
    }
    
    .style-grid .avatar-img {
      width: 64px;
      height: 64px;
    }
    
    .style-grid .user-info {
      margin-bottom: 12px;
    }
    
    .style-grid .user-meta {
      font-size: 12px;
      margin-bottom: 4px;
    }
    
    .style-grid .action-btn {
      width: 100%;
      padding: 6px 0;
      background-color: #F3F4F6;
      color: var(--dark);
      border: none;
    }
    
    .style-grid .action-btn.following {
      background-color: var(--primary);
      color: white;
    }
    
    /* 样式4: 带最近活动的列表 */
    .style-activity .user-content {
      display: flex;
      align-items: center;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--border-light);
    }
    
    .activity-thumbnail {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      object-fit: cover;
      margin-right: 8px;
      background-color: #E5E7EB;
    }
    
    .activity-text {
      flex: 1;
      font-size: 13px;
      color: #4B5563;
      line-height: 1.3;
    }
    
    .style-activity .action-btn {
      background: none;
      border: none;
      color: #6B7280;
      font-size: 20px;
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .style-activity .action-btn:hover {
      background-color: #F3F4F6;
    }
    
    /* 样式5: 简洁头像流 */
    .style-avatarflow .avatar-container {
      display: flex;
      padding: 16px;
      overflow-x: auto;
      gap: 16px;
    }
    
    .style-avatarflow .avatar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 70px;
    }
    
    .style-avatarflow .avatar-img {
      width: 60px;
      height: 60px;
      margin-bottom: 8px;
    }
    
    .style-avatarflow .user-name {
      font-size: 13px;
      text-align: center;
      margin-bottom: 4px;
    }
    
    .style-avatarflow .user-meta {
      font-size: 11px;
      color: #6B7280;
    }
    
    .style-avatarflow .action-btn {
      margin-top: 8px;
      font-size: 12px;
      padding: 3px 8px;
      background-color: #F3F4F6;
      color: var(--dark);
      border: none;
    }
    
    .style-avatarflow .action-btn.following {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .status-online.pulse {
      animation: pulse 2s infinite;
    }
    
    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background: #F3F4F6;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #D1D5DB;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #9CA3AF;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">用户列表样式</div>
    <div class="switcher-option active" data-style="basic">基础列表</div>
    <div class="switcher-option" data-style="interactive">带互动数据</div>
    <div class="switcher-option" data-style="grid">网格卡片</div>
    <div class="switcher-option" data-style="activity">带最近活动</div>
    <div class="switcher-option" data-style="avatarflow">头像流</div>
  </div>
  
  <div class="container">
    <div class="page-header">
      <h1 class="page-title">活跃用户</h1>
      <p class="page-description">发现并关注社区中活跃的用户</p>
    </div>
    
    <!-- 1. 基础列表样式 -->
    <div class="user-list-container active style-basic" id="basicList">
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online pulse"></span>
        </div>
        <div class="user-info">
          <div class="user-name">陈明亮</div>
          <div class="user-meta">产品设计师 · 3分钟前在线</div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow">关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1012/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online"></span>
        </div>
        <div class="user-info">
          <div class="user-name">林小雨</div>
          <div class="user-meta">前端开发 · 正在活跃</div>
        </div>
        <div class="user-actions">
          <button class="action-btn following">已关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1025/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-away"></span>
        </div>
        <div class="user-info">
          <div class="user-name">王大锤</div>
          <div class="user-meta">UI设计师 · 15分钟前在线</div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow">关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1027/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-offline"></span>
        </div>
        <div class="user-info">
          <div class="user-name">张思远</div>
          <div class="user-meta">后端开发 · 1小时前在线</div>
        </div>
        <div class="user-actions">
          <button class="action-btn following">已关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1066/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online"></span>
        </div>
        <div class="user-info">
          <div class="user-name">刘芳</div>
          <div class="user-meta">产品经理 · 正在活跃</div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow">关注</button>
        </div>
      </div>
    </div>
    
    <!-- 2. 带互动数据的列表 -->
    <div class="user-list-container style-interactive" id="interactiveList">
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online pulse"></span>
        </div>
        <div class="user-info">
          <div class="user-name">陈明亮</div>
          <div class="user-meta">产品设计师 · 3分钟前在线</div>
          <div class="user-stats">
            <div class="stat"><i class="fa fa-post"></i> 128帖</div>
            <div class="stat"><i class="fa fa-user"></i> 3.2k粉</div>
            <div class="stat"><i class="fa fa-eye"></i> 15.6k浏览</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow">关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1012/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online"></span>
        </div>
        <div class="user-info">
          <div class="user-name">林小雨</div>
          <div class="user-meta">前端开发 · 正在活跃</div>
          <div class="user-stats">
            <div class="stat"><i class="fa fa-post"></i> 96帖</div>
            <div class="stat"><i class="fa fa-user"></i> 2.8k粉</div>
            <div class="stat"><i class="fa fa-eye"></i> 12.3k浏览</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn following">已关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1025/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-away"></span>
        </div>
        <div class="user-info">
          <div class="user-name">王大锤</div>
          <div class="user-meta">UI设计师 · 15分钟前在线</div>
          <div class="user-stats">
            <div class="stat"><i class="fa fa-post"></i> 215帖</div>
            <div class="stat"><i class="fa fa-user"></i> 5.7k粉</div>
            <div class="stat"><i class="fa fa-eye"></i> 32.1k浏览</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow">关注</button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1027/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-offline"></span>
        </div>
        <div class="user-info">
          <div class="user-name">张思远</div>
          <div class="user-meta">后端开发 · 1小时前在线</div>
          <div class="user-stats">
            <div class="stat"><i class="fa fa-post"></i> 78帖</div>
            <div class="stat"><i class="fa fa-user"></i> 1.9k粉</div>
            <div class="stat"><i class="fa fa-eye"></i> 8.4k浏览</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn following">已关注</button>
        </div>
      </div>
    </div>
    
    <!-- 3. 网格卡片样式 -->
    <div class="user-list-container style-grid" id="gridList">
      <div class="user-grid">
        <div class="user-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online pulse"></span>
          </div>
          <div class="user-info">
            <div class="user-name">陈明亮</div>
            <div class="user-meta">产品设计师</div>
            <div class="user-meta">3分钟前在线</div>
          </div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="user-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1012/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">林小雨</div>
            <div class="user-meta">前端开发</div>
            <div class="user-meta">正在活跃</div>
          </div>
          <button class="action-btn following">已关注</button>
        </div>
        
        <div class="user-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1025/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-away"></span>
          </div>
          <div class="user-info">
            <div class="user-name">王大锤</div>
            <div class="user-meta">UI设计师</div>
            <div class="user-meta">15分钟前在线</div>
          </div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="user-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1027/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-offline"></span>
          </div>
          <div class="user-info">
            <div class="user-name">张思远</div>
            <div class="user-meta">后端开发</div>
            <div class="user-meta">1小时前在线</div>
          </div>
          <button class="action-btn following">已关注</button>
        </div>
        
        <div class="user-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1066/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">刘芳</div>
            <div class="user-meta">产品经理</div>
            <div class="user-meta">正在活跃</div>
          </div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="user-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1074/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">赵天明</div>
            <div class="user-meta">数据分析师</div>
            <div class="user-meta">5分钟前在线</div>
          </div>
          <button class="action-btn follow">关注</button>
        </div>
      </div>
    </div>
    
    <!-- 4. 带最近活动的列表 -->
    <div class="user-list-container style-activity" id="activityList">
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online pulse"></span>
        </div>
        <div class="user-info">
          <div class="user-name">陈明亮</div>
          <div class="user-meta">产品设计师 · 3分钟前在线</div>
          
          <div class="user-content">
            <img src="https://picsum.photos/id/237/200" alt="活动内容" class="activity-thumbnail">
            <div class="activity-text">发布了新作品：「2023年产品设计趋势分析」</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow"><i class="fa fa-plus"></i></button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1012/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-online"></span>
        </div>
        <div class="user-info">
          <div class="user-name">林小雨</div>
          <div class="user-meta">前端开发 · 正在活跃</div>
          
          <div class="user-content">
            <img src="https://picsum.photos/id/24/200" alt="活动内容" class="activity-thumbnail">
            <div class="activity-text">分享了文章：「React 18新特性详解与实践」</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn following"><i class="fa fa-check"></i></button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1025/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-away"></span>
        </div>
        <div class="user-info">
          <div class="user-name">王大锤</div>
          <div class="user-meta">UI设计师 · 15分钟前在线</div>
          
          <div class="user-content">
            <img src="https://picsum.photos/id/96/200" alt="活动内容" class="activity-thumbnail">
            <div class="activity-text">评论了帖子：「同意作者观点，深色模式确实能提升用户体验」</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn follow"><i class="fa fa-plus"></i></button>
        </div>
      </div>
      
      <div class="user-item">
        <div class="avatar">
          <img src="https://picsum.photos/id/1027/200" alt="用户头像" class="avatar-img">
          <span class="status-indicator status-offline"></span>
        </div>
        <div class="user-info">
          <div class="user-name">张思远</div>
          <div class="user-meta">后端开发 · 1小时前在线</div>
          
          <div class="user-content">
            <img src="https://picsum.photos/id/60/200" alt="活动内容" class="activity-thumbnail">
            <div class="activity-text">发布了代码库：「Spring Boot微服务架构实践」</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="action-btn following"><i class="fa fa-check"></i></button>
        </div>
      </div>
    </div>
    
    <!-- 5. 简洁头像流 -->
    <div class="user-list-container style-avatarflow" id="avatarflowList">
      <div class="avatar-container">
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online pulse"></span>
          </div>
          <div class="user-name">陈明亮</div>
          <div class="user-meta">正在活跃</div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1012/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online"></span>
          </div>
          <div class="user-name">林小雨</div>
          <div class="user-meta">正在活跃</div>
          <button class="action-btn following">已关注</button>
        </div>
        
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1025/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-away"></span>
          </div>
          <div class="user-name">王大锤</div>
          <div class="user-meta">15分钟前</div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1027/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-offline"></span>
          </div>
          <div class="user-name">张思远</div>
          <div class="user-meta">1小时前</div>
          <button class="action-btn following">已关注</button>
        </div>
        
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1066/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online"></span>
          </div>
          <div class="user-name">刘芳</div>
          <div class="user-meta">正在活跃</div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1074/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-online"></span>
          </div>
          <div class="user-name">赵天明</div>
          <div class="user-meta">5分钟前</div>
          <button class="action-btn follow">关注</button>
        </div>
        
        <div class="avatar-item">
          <div class="avatar">
            <img src="https://picsum.photos/id/1083/200" alt="用户头像" class="avatar-img">
            <span class="status-indicator status-offline"></span>
          </div>
          <div class="user-name">孙艺珍</div>
          <div class="user-meta">3小时前</div>
          <button class="action-btn follow">关注</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的列表样式
    let currentListStyle = 'basic';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const listContainers = {
      'basic': document.getElementById('basicList'),
      'interactive': document.getElementById('interactiveList'),
      'grid': document.getElementById('gridList'),
      'activity': document.getElementById('activityList'),
      'avatarflow': document.getElementById('avatarflowList')
    };
    
    // 切换列表样式
    function switchListStyle(style) {
      // 隐藏所有列表
      Object.values(listContainers).forEach(container => {
        container.classList.remove('active');
      });
      
      // 显示选中的列表
      if (listContainers[style]) {
        listContainers[style].classList.add('active');
        currentListStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchListStyle(style);
      });
    });
    
    // 关注按钮点击事件
    document.addEventListener('click', function(e) {
      const followBtn = e.target.closest('.action-btn.follow, .action-btn.following');
      if (followBtn) {
        e.preventDefault();
        
        // 切换按钮状态
        if (followBtn.classList.contains('follow')) {
          followBtn.classList.remove('follow');
          followBtn.classList.add('following');
          
          // 更新按钮文本或图标
          if (followBtn.querySelector('i')) {
            followBtn.innerHTML = '<i class="fa fa-check"></i>';
          } else {
            followBtn.textContent = '已关注';
          }
          
          alert(`已关注该用户`);
        } else {
          followBtn.classList.remove('following');
          followBtn.classList.add('follow');
          
          // 更新按钮文本或图标
          if (followBtn.querySelector('i')) {
            followBtn.innerHTML = '<i class="fa fa-plus"></i>';
          } else {
            followBtn.textContent = '关注';
          }
          
          alert(`已取消关注`);
        }
      }
    });
    
    // 用户项点击事件（进入用户主页）
    document.addEventListener('click', function(e) {
      const userItem = e.target.closest('.user-item, .avatar-item');
      const actionBtn = e.target.closest('.action-btn');
      
      // 如果点击的不是操作按钮，则进入用户主页
      if (userItem && !actionBtn) {
        const userName = userItem.querySelector('.user-name').textContent;
        alert(`进入 ${userName} 的个人主页`);
      }
    });
  </script>
</body>
</html>
